<template>
  <back-dialog-base
    @onCommit="handleSubmit"
    @close="close"
    :title="title"
    :visible="visibleDialog"
    width="446px"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="所属管廊：" prop="pipeName">
                  <el-select
                    v-model="form.pipeName"
                    clearable
                    placeholder="--请选择--"
                  >
                    <el-option
                      v-for="item in pipeNameDrop"
                      :key="item.id"
                      :label="item.pipeName"
                      :value="item.pipeName"
                    />
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所在位置：" prop="position">
                  <el-input
                    v-model="form.position"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="施工描述：" prop="remark">
                  <el-input
                    v-model="form.remark"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"
                ><el-form-item label="负责人：" prop="director">
                  <el-input
                    v-model="form.director"
                    placeholder="请输入…"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="开始时间：" prop="beginTime">
                  <el-date-picker
                    v-model="form.beginTime"
                    type="datetime"
                    placeholder="--请选择--"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  /> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="结束时间：" prop="endTime">
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="--请选择--" /></el-form-item
              ></el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import {
  reactive,
  defineProps,
  ref,
  defineEmits,
  watch,
  onMounted,
  defineExpose,
  nextTick
} from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { constructionSave, commonPipeNameDrop } from '@/api/back'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const pipeNameDrop = ref([]) //所属管廊下拉列表
const formRef = ref(null)
const emits = defineEmits(['onReload'])
const form = reactive({
  beginTime: '', //开始时间
  director: '', //作业负责人
  endTime: '', //结束时间
  id: '', //主键ID
  isDeleted: '', //删除标志位
  pipeId: '', //所属管廊ID
  pipeName: '', //管廊名称
  position: '', //所在位置
  remark: '' //施工描述
})

//获取所属管廊下拉列表
const GetpipeNameDrop = () => {
  commonPipeNameDrop().then((res) => {
    let data = res
    pipeNameDrop.value = [...data]
  })
}
const close = () => {
  clearForm()
  // formRef.value.resetFields()
  // formRef.value.clearValidate()
}
onMounted(() => {
  GetpipeNameDrop()
})

const clearForm = () => {
  if (!formRef.value) return
  // formRef.value.resetFields()
  form.value = {
    beginTime: '', //开始时间
    director: '', //作业负责人
    endTime: '', //结束时间
    id: '', //主键ID
    isDeleted: '', //删除标志位
    pipeId: '', //所属管廊ID
    pipeName: '', //管廊名称
    position: '', //所在位置
    remark: '' //施工描述
  }
}
const save = async (data) => {
  const res = await constructionSave(data)
  if (res && res.id) {
    if (props.title === '新建施工') {
      message({ type: 'success', message: '新增施工登记成功!' })
    } else {
      message({ type: 'success', message: '编辑施工登记成功!' })
    }

    // clearForm()
    emits('onReload')
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(props.rowData)
      save(Object.assign(props.rowData, form))
      // save(JSON.parse(JSON.stringify(props.rowData, form)))
      // save(JSON.stringify(props.rowData, form))
    } else {
      return false
    }
  })
}

watch(
  () => props.rowData,
  () => {
    form.pipeName = props.rowData.pipeName
    form.position = props.rowData.position
    form.director = props.rowData.director
    form.beginTime = props.rowData.beginTime
    form.endTime = props.rowData.endTime
    form.remark = props.rowData.remark
    form.id = props.rowData.id
    form.isDeleted = props.rowData.isDeleted
    form.pipeId = props.rowData.pipeId
  }
)
const rules = reactive({
  pipeName: [
    {
      required: true,
      message: '所属管廊不能为空',
      trigger: 'change'
    }
  ],
  position: [
    {
      required: true,
      message: '所在位置不能为空',
      trigger: 'blur'
    }
  ],
  director: [
    {
      required: true,
      message: '负责人不能为空',
      trigger: 'blur'
    }
  ],
  beginTime: [
    {
      required: true,
      message: '开始时间不能为空',
      trigger: 'blur'
    }
  ],
  endTime: [
    {
      required: true,
      message: '结束时间不能为空',
      trigger: 'blur'
    }
  ],
  remark: [
    {
      required: true,
      message: '施工描述不能为空',
      trigger: 'blur'
    }
  ]
})
const cleara = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
defineExpose({ cleara })
</script>
<style lang="scss" scoped>
.content-warp {
  :deep(.el-input__inner) {
    width: 212px;
  }
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
